<template>
  <view class="user-info-page" :style="{background: themeColorStyles.backgroundGradient}">
    <!-- 内容滚动区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 头像信息卡片 -->
      <view class="avatar-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="card-header">
          <view class="header-left">
            <text class="card-title">头像信息</text>
            <text class="card-subtitle">Avatar Information</text>
          </view>
        </view>
        <view class="avatar-content">
          <view class="avatar-display">
            <image class="avatar-image" :src="user.avatar || '/static/images/profile.jpg'" mode="aspectFill"></image>
          </view>
          <view class="avatar-actions">
            <view class="change-avatar-btn" @click="changeAvatar" :style="{background: themeColorStyles.primaryColor}">
              <text class="btn-text">更换头像</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 基本信息卡片 -->
      <view class="info-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="card-header">
          <view class="header-left">
            <text class="card-title">基本信息</text>
            <text class="card-subtitle">Basic Information</text>
          </view>
          <view class="header-right">
            <view class="edit-btn" @click="handleEdit" :style="{background: themeColorStyles.primaryColor}">
              <text class="edit-text">编辑</text>
            </view>
          </view>
        </view>
        <view class="info-list">
          <view class="info-item" :style="{background: themeColorStyles.itemBackground, border: themeColorStyles.itemBorder}">
            <view class="info-icon" :style="{background: themeColorStyles.iconBackground}">
              <text class="icon">👤</text>
            </view>
            <view class="info-content">
              <text class="info-label">昵称</text>
              <text class="info-value" :style="{color: themeColorStyles.primaryColor}">{{user.nickName || '未设置'}}</text>
            </view>
          </view>
          <view class="info-item" :style="{background: themeColorStyles.itemBackground, border: themeColorStyles.itemBorder}">
            <view class="info-icon" :style="{background: themeColorStyles.iconBackground}">
              <text class="icon">📱</text>
            </view>
            <view class="info-content">
              <text class="info-label">手机号码</text>
              <text class="info-value" :style="{color: themeColorStyles.primaryColor}">{{user.phonenumber || '未绑定'}}</text>
            </view>
          </view>
          <view class="info-item" :style="{background: themeColorStyles.itemBackground, border: themeColorStyles.itemBorder}">
            <view class="info-icon" :style="{background: themeColorStyles.iconBackground}">
              <text class="icon">📧</text>
            </view>
            <view class="info-content">
              <text class="info-label">邮箱</text>
              <text class="info-value" :style="{color: themeColorStyles.primaryColor}">{{user.email || '未绑定'}}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 系统信息卡片 -->
      <view class="info-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="card-header">
          <text class="card-title">系统信息</text>
          <text class="card-subtitle">System Information</text>
        </view>
        <view class="info-list">
          <view class="info-item" :style="{background: themeColorStyles.itemBackground, border: themeColorStyles.itemBorder}">
            <view class="info-icon" :style="{background: themeColorStyles.iconBackground}">
              <text class="icon">👥</text>
            </view>
            <view class="info-content">
              <text class="info-label">角色</text>
              <text class="info-value" :style="{color: themeColorStyles.primaryColor}">{{roleGroup || '未分配'}}</text>
            </view>
          </view>
          <view class="info-item" :style="{background: themeColorStyles.itemBackground, border: themeColorStyles.itemBorder}">
            <view class="info-icon" :style="{background: themeColorStyles.iconBackground}">
              <text class="icon">📅</text>
            </view>
            <view class="info-content">
              <text class="info-label">创建日期</text>
              <text class="info-value" :style="{color: themeColorStyles.primaryColor}">{{user.createTime || '未知'}}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </scroll-view>
    
    <!-- 编辑弹窗 -->
    <view v-if="showEditModal" class="modal-overlay" @click="closeEditModal">
      <view class="modal-content" @click.stop :style="{border: `2rpx solid ${themeColorStyles.primaryColor}`}">
        <view class="modal-header">
          <text class="modal-title">编辑个人信息</text>
          <view class="close-btn" @click="closeEditModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">昵称</text>
            <input class="form-input" v-model="editForm.nickName" placeholder="请输入昵称" maxlength="20" />
          </view>
          
          <view class="form-item">
            <text class="form-label">手机号码</text>
            <input class="form-input" v-model="editForm.phonenumber" placeholder="请输入手机号码" maxlength="11" />
          </view>
          
          <view class="form-item">
            <text class="form-label">邮箱</text>
            <input class="form-input" v-model="editForm.email" placeholder="请输入邮箱" />
          </view>
        </view>
        
        <view class="modal-footer">
          <view class="btn-cancel" @click="closeEditModal">
            <text class="btn-text">取消</text>
          </view>
          <view class="btn-confirm" @click="submitEdit" :style="{background: themeColorStyles.primaryColor}">
            <text class="btn-text confirm-text">保存</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getProfile, updateProfile } from '@/api/user'
  import { checkLoginStatus, handleApiError } from '@/utils/loginCheck'
  import { getThemePrimaryColor, getThemeColorFromGlobal } from '@/utils/themeUtils'

  export default {
    data() {
      return {
        user: {},
        roleGroup: "",
        themeColor: '1',
        showEditModal: false,
        editForm: {
          nickName: '',
          phonenumber: '',
          email: ''
        }
      }
    },
    async onLoad() {
      await this.initThemeColor()
      this.getUser()
    },
    
    async onShow() {
      await this.initThemeColor()
      this.getUser()
    },
    
    computed: {
      primaryColor() {
        return getThemePrimaryColor(this.themeColor)
      },
      
      themeColorStyles() {
        return this.setThemeColorVariables(this.primaryColor)
      }
    },
    methods: {
        // 初始化主题色
        async initThemeColor() {
          try {
            const themeColor = await getThemeColorFromGlobal()
            this.themeColor = themeColor
          } catch (error) {
            console.error('个人信息页面主题色初始化失败:', error)
            this.themeColor = '1'
          }
        },
        
        // 设置主题色变量
        setThemeColorVariables(color) {
          const rgb = this.hexToRgb(color)
          const lightColor = this.lightenColor(color, 0.9)
          
          return {
            primaryColor: color,
            primaryColorBgLight: lightColor,
            backgroundGradient: `linear-gradient(180deg, ${this.lightenColor(color, 0.95)} 0%, ${this.lightenColor(color, 0.92)} 100%)`,
            cardShadow: `0 8rpx 32rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`,
            cardBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
            itemBackground: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.05)`,
            itemBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
            iconBackground: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`
          }
        },
        
        // 十六进制颜色转RGB
        hexToRgb(hex) {
          const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
          return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
          } : { r: 74, g: 144, b: 226 }
        },
        
        // 颜色变浅
        lightenColor(color, amount) {
          const rgb = this.hexToRgb(color)
          const r = Math.round(rgb.r + (255 - rgb.r) * amount)
          const g = Math.round(rgb.g + (255 - rgb.g) * amount)
          const b = Math.round(rgb.b + (255 - rgb.b) * amount)
          return `rgb(${r}, ${g}, ${b})`
        },
        
        async getUser() {
          try {
            // 使用统一的登录检测
            const loginResult = await checkLoginStatus()
            if (!loginResult.isLoggedIn) {
              return
            }
            
            const response = await getProfile()
            this.user = response.data
            this.roleGroup = response.roleGroup
          } catch (error) {
            console.error('获取用户信息异常:', error)
            // 使用统一的错误处理
            handleApiError(error, '获取用户信息失败')
          }
        },
        
        // 处理编辑按钮点击
        handleEdit() {
          this.editForm = {
            nickName: this.user.nickName || '',
            phonenumber: this.user.phonenumber || '',
            email: this.user.email || ''
          }
          this.showEditModal = true
        },
        
        // 关闭编辑弹窗
        closeEditModal() {
          this.showEditModal = false
        },
        
        // 提交编辑表单
        async submitEdit() {
          // 表单验证
          if (!this.editForm.nickName.trim()) {
            uni.showToast({
              title: '请输入昵称',
              icon: 'none'
            })
            return
          }
          
          if (!this.editForm.phonenumber.trim()) {
            uni.showToast({
              title: '请输入手机号码',
              icon: 'none'
            })
            return
          }
          
          if (!this.editForm.email.trim()) {
            uni.showToast({
              title: '请输入邮箱',
              icon: 'none'
            })
            return
          }
          
          try {
            uni.showLoading({ title: '保存中...' })
            
            // 调用更新用户信息的API
             const response = await updateProfile(this.editForm)
            
            // 更新本地用户信息
            this.user.nickName = this.editForm.nickName
            this.user.phonenumber = this.editForm.phonenumber
            this.user.email = this.editForm.email
            
            uni.hideLoading()
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            })
            
            this.closeEditModal()
            
          } catch (error) {
            console.error('更新用户信息异常:', error)
            uni.hideLoading()
            handleApiError(error, '保存失败')
          }
        },
        
        // 更换头像
        changeAvatar() {
          uni.navigateTo({
            url: '/pages/mine/avatar/index'
          })
        }
      }
  }
</script>

<style lang="scss" scoped>
.user-info-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* 内容滚动区域 */
.content-scroll {
  flex: 1;
  padding: 16rpx 32rpx 0;
}

/* 头像卡片样式 */
.avatar-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 16rpx;
  padding: 32rpx 24rpx;
  transition: all 0.3s ease;
}

.avatar-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.avatar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24rpx;
}

.avatar-display {
  display: flex;
  align-items: center;
}

.avatar-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid #f0f0f0;
  transition: all 0.3s ease;
}

.avatar-actions {
  display: flex;
  align-items: center;
}

.change-avatar-btn {
  padding: 16rpx 32rpx;
  border-radius: 24rpx;
  transition: all 0.3s ease;
}

.change-avatar-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.change-avatar-btn .btn-text {
  color: #FFFFFF;
  font-size: 28rpx;
  font-weight: 500;
}

/* 信息卡片样式 */
.info-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 16rpx;
  padding: 32rpx 24rpx;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

/* 卡片头部 */
.card-header {
  margin-bottom: 32rpx;
  border-bottom: 1rpx solid rgba(74, 144, 226, 0.1);
  padding-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
}

.edit-btn {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  background: #4A90E2;
  transition: all 0.3s ease;
}

.edit-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.edit-text {
  color: #FFFFFF;
  font-size: 24rpx;
  font-weight: 500;
}

.card-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.card-subtitle {
  font-size: 28rpx;
  color: #8A8A8A;
  display: block;
}

/* 信息列表样式 */
.info-list {
  margin-top: 24rpx;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateX(4rpx);
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-icon {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.info-item:hover .info-icon {
  transform: scale(1.1);
}

.icon {
  font-size: 36rpx;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 28rpx;
  display: block;
  font-weight: 500;
}

/* 底部间距 */
.bottom-space {
  height: 60rpx;
}

/* 编辑弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  background: #FFFFFF;
  border-radius: 24rpx;
  width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 32rpx 24rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1A1A1A;
}

.close-btn {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24rpx;
  background: #F5F5F5;
  transition: all 0.3s ease;
}

.close-btn:active {
  background: #E0E0E0;
  transform: scale(0.9);
}

.close-icon {
  font-size: 32rpx;
  color: #666666;
  line-height: 1;
}

.modal-body {
  padding: 32rpx;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  border: 2rpx solid #E0E0E0;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333333;
  background: #FAFAFA;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #4A90E2;
  background: #FFFFFF;
  outline: none;
}

.modal-footer {
  display: flex;
  padding: 24rpx 32rpx 32rpx;
  gap: 24rpx;
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.btn-cancel {
  background: #F5F5F5;
  border: 2rpx solid #E0E0E0;
}

.btn-cancel:active {
  background: #E0E0E0;
  transform: scale(0.98);
}

.btn-confirm {
  background: #4A90E2;
}

.btn-confirm:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
}

.confirm-text {
  color: #FFFFFF;
}

</style>
